<template>
	<a-row :gutter="24">
		<a-col :span="4">
			<a-input-search v-model:value="searchValue" placeholder="输入文本搜索" class="mb-2" @search="onSearch" />
			<a-list v-if="showData.length > 0" size="small" bordered :data-source="showData">
				<template #renderItem="{ item }">
					<a-list-item
						class="hover:bg-[#e6f7ff] cursor-pointer"
						:class="searchFormState.ruleClass === item.value ? 'bg-[#e6f7ff]' : ''"
						@click="treeSelect(item.value)"
						>{{ item.label }}</a-list-item
					>
				</template>
			</a-list>
			<a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
		</a-col>
		<a-col :span="20">
			<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item name="ruleName" label="名称">
							<a-input v-model:value="searchFormState.ruleName" allow-clear placeholder="请输入名称"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item name="header" label="前缀">
							<a-input v-model:value="searchFormState.header" allow-clear placeholder="请输入前缀"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-button type="primary" @click="table.refresh(true)">
							<template #icon><SearchOutlined /></template>查询</a-button
						>
						<a-button class="button-left" @click="() => searchFormRef.resetFields()">
							<template #icon><redo-outlined /></template>重置</a-button
						>
					</a-col>
				</a-row>
			</a-form>

			<s-table
				ref="table"
				:columns="columns"
				:data="loadData"
				:alert="options.alert.show"
				:scroll="{ x: '1000px' | true }"
				bordered
				:row-key="(record) => record.id"
				:row-selection="options.rowSelection"
				:tool-config="toolConfig"
			>
				<template #operator>
					<a-space>
						<a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('rulesAdd')">
							<template #icon><plus-outlined /></template>新增编码规则</a-button
						>
						<batch-delete
							v-if="hasPerm('rulesBatchDelete')"
							title="确定要删除选中编码规则吗?"
							buttonName="删除编码规则"
							:selectedRowKeys="selectedRowKeys"
							@batchDelete="batchDeleteRulesService"
						/>
					</a-space>
				</template>
				<template #bodyCell="{ column, record }">
					<template v-if="column?.dataIndex === 'ruleType'">
						{{ $TOOL.dictTypeData('RULE_TYPE', record.ruleType) }}
					</template>
					<template v-if="column?.dataIndex === 'ruleClass'">
						{{ $TOOL.dictTypeData('RULE_CLASS', record.ruleClass) }}
					</template>
					<template v-if="column?.dataIndex === 'action'">
						<a-space>
							<a @click="formRef.onOpen(record)" v-if="hasPerm('rulesEdit')">编辑</a>
							<a-popconfirm title="确定要删除吗？" @confirm="deleteRulesService(record)">
								<a-button type="link" danger size="small" v-if="hasPerm('rulesDelete')">删除</a-button>
							</a-popconfirm>
						</a-space>
					</template>
				</template>
			</s-table>
		</a-col>
	</a-row>
	<Form ref="formRef" @successful="table.refresh(true)" />
</template>

<script setup>
	import { Empty } from 'ant-design-vue'
	import tool from '@/utils/tool'
	import Form from './form.vue'
	import rulesApi from '@/api/dev/rulesApi'

	let searchFormState = reactive({}) //查询表单状态
	const searchFormRef = ref({}) //查询表单
	// 默认展开的节点
	const formRef = ref() //新增/编辑表单页

	//表格配置
	const table = ref() //表格
	const ruleClassOptions = ref(tool.dictList('RULE_CLASS'))
	const showData = ref([])
	const selectedRowKeys = ref([])
	const searchValue = ref('')
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false } //表格工具配置
	const columns = [
		{ title: '名称', width: 100, dataIndex: 'ruleName', ellipsis: true },
		{ title: '编号', width: 100, dataIndex: 'ruleCode', ellipsis: true },
		{ title: '类型', width: 100, dataIndex: 'ruleType' },
		{ title: '分类', width: 100, dataIndex: 'ruleClass' },
		{ title: '前缀', width: 100, dataIndex: 'header' },
		{ title: '中间时间格式', width: 120, dataIndex: 'middleTime' },
		{ title: '后缀(长度)', width: 100, dataIndex: 'lastLen' },
		{ title: '起始量', width: 80, dataIndex: 'startValue' }
	]
	if (hasPerm(['rulesEdit', 'rulesDelete'])) {
		columns.push({
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			fixed: 'right',
			width: 100
		})
	}

	// 列表选择配置
	const options = reactive({
		alert: {
			show: true, //显示选择多少个
			clear: () => {
				selectedRowKeys.value = []
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	})

	onMounted(() => {
		searchFormState.ruleClass = ''
		onSearch()
	})

	// 表格查询 返回 Promise 对象
	const loadData = (parameter) => {
		const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
		return rulesApi.rulesPage(Object.assign(parameter, searchFormParam)).then((data) => {
			return data
		})
	}

	// 删除
	const deleteRulesService = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		rulesApi.rulesDelete(params).then(() => {
			table.value.refresh(true)
		})
	}

	// 批量删除
	const batchDeleteRulesService = (params, callback) => {
		rulesApi
			.rulesDelete(params)
			.then(() => {})
			.finally(() => {
				table.value.clearRefreshSelected()
				callback() //调用组件中的回调方法
			})
	}

	// 点击树查询
	const treeSelect = (code) => {
		searchFormState.ruleClass = code
		table.value.refresh(true)
	}

	// 搜索
	const onSearch = () => {
		if (searchValue.value) {
			showData.value = [
				{
					id: 0,
					label: '无',
					value: ''
				},
				...ruleClassOptions.value.filter((x) => x.label.includes(searchValue.value))
			]
		} else {
			showData.value = [
				{
					id: 0,
					label: '无',
					value: ''
				},
				...ruleClassOptions.value
			]
		}
	}
</script>

<style scoped>
	.button-left {
		margin-left: 8px;
	}
</style>
